<template>
	<div class="g-title">
		<h3>城市</h3>
		<input type="text" placeholder="请输入搜索内容" />
		<h3>登录</h3>
	</div>
	<!-- 轮播 -->
	<van-swipe :autoplay="3000" indicator-color="white">
		<van-swipe-item v-for="item in list">
			<van-image width="100%" height="200" :src="item.url" />
		</van-swipe-item>
	</van-swipe>

	<!-- 分类宫格 -->
	<van-grid :column-num="4">
		<van-grid-item v-for="item,index in typeList" :key="index" :icon="item.icon" :text="item.title" />
	</van-grid>
</template>

<script setup>
import { ref ,reactive,onMounted} from 'vue'
import axios from 'axios' //引入axios
const list = ref([])

const typeList = reactive([
  {title:'美食',icon:'photo-o'},
  {title:'电脑',icon:'photo-o'},
  {title:'美食',icon:'photo-o'},
  {title:'电脑',icon:'photo-o'},
  {title:'美食',icon:'photo-o'},
  {title:'电脑',icon:'photo-o'},
  {title:'美食',icon:'photo-o'},
  {title:'手机',icon:'photo-o'},
])

//使用axios  promise
const getBanner = ()=>{
	
axios({
	url:'http://47.109.74.84:8089/api/banner',
	method:'GET'
}).then(res=>{
	const data = res.data
	list.value = data.resultInfo.list
})
}

 onMounted(() => {
	getBanner()
 })


</script>

<style lang="css" scoped>
.g-title {
	display: flex;
	background-color: #ff0000;
	height: 40px;
	align-items: center;
	justify-content: space-between;
}
.g-title h3 {
	color: white;
	font-size: 16px;
	font-weight: normal;
	width: 60px;
	text-align: center;
}
.g-title input {
	flex: 1;
	height: 30px;
	border: none;
	outline: none;
	border-radius: 8px;
	text-indent: 5px;
}
</style>
